<template>
  <div class="search-about">
    <div class="search-about-basic">
      <div class="search-about-basic-header">基本信息</div>
      <div class="search-about-basic-content">
        <p>
          累计搜索次数
          <span style="color:#409eff">{{ allSearchAmount }}</span>次
        </p>
        <p>
          今日搜索次数
          <span>{{ daySearchAmount }}</span>条
        </p>
      </div>
    </div>
    <div class="search-about-chart">
      <div class="search-about-chart-header">
        <div class="search-about-chart-header-left">
          搜索行为趋势
          <span style="color:#666;font-size:14px;">({{ name }})</span>
        </div>
      </div>
      <div class="search-about-chart-main">
        <bar-line id="search-line" :data="data" height="500px" width="100%" class-name="search-line"/>
      </div>
    </div>
  </div>
</template>

<script>
  import BarLine from '../line';
  import {getCloudSearchStatistics} from "@/api/cloud/cloud_search"; // 数据接口
  import {getTenantId} from '@/utils/auth';

  export default {
    components: {
      BarLine
    },
    data() {
      return {
        allSearchAmount: '',
        daySearchAmount: '',
        name: '最近1个月'
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      //接口获取数据
      getData() {
        getCloudSearchStatistics(getTenantId()).then(response => {
          this.allSearchAmount = response.data.allSearchAmount;
          this.daySearchAmount = response.data.daySearchAmount;
        });
      }
    }
  }
</script>

<style lang="scss">
  .search-about {
    &-basic {
      width: 100%;
      padding-bottom: 30px;
      border: 1px solid #ddd;
      border-radius: 5px;
      overflow: hidden;

      &-header {
        font-size: 16px;
        padding: 10px 20px;
        border-bottom: 1px solid #ddd;
        background-color: #fafafa;
        margin-bottom: 10px;
      }

      &-content {
        p {
          margin-left: 50px;
          margin-top: 30px;
          font-size: 16px;

          span {
            font-size: 24px;
            margin-right: 5px;
          }
        }
      }
    }

    &-chart {
      width: 100%;
      padding-bottom: 30px;
      border: 1px solid #ddd;
      border-radius: 5px;
      overflow: hidden;
      margin: 20px 0;

      &-header {
        font-size: 16px;
        padding: 0 20px;
        border-bottom: 1px solid #ddd;
        background-color: #fafafa;
        margin-bottom: 10px;
        overflow: hidden;

        &-left {
          float: left;
          height: 36px;
          line-height: 36px;
        }

        &-right {
          float: right;
        }
      }

      &-main {
        width: 100%;
        padding: 0 20px;

        .search-line {
          margin: auto;
          float: left;
        }
      }
    }
  }
</style>
